<template>
  <div class="container">
    <div class="header">
      <h1>个人信息</h1>
      <el-button type="primary" icon="el-icon-plus" @click="openForm">新增</el-button>
    </div>
    <el-table :data="info" border class="custom-table">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="editItem(row)">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteItem(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    
    <el-dialog title="个人信息" :visible.sync="dialogVisible" width="30%">
      <el-form :model="form" :rules="formRules" ref="form" label-width="80px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" clearable></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input-number v-model="form.age" :min="0" :max="100"></el-input-number>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="form.phone" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-pagination
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageSize"
      :current-page="currentPage"
      :total="totalItems"
      @current-change="handlePageChange"
    ></el-pagination>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: [
        { name: "张三", age: 25, phone: "123456789" },
        { name: "李四", age: 30, phone: "987654321" },
        { name: "王五", age: 28, phone: "135792468" },
        // 添加更多人的信息...
      ],
      
      dialogVisible: false,
      form: {
        id: '',
        name: '',
        age: null,
        phone: ''
      },
      pageSize:5,  //每页显示的数据量
      currentPage:1,  //当前所在的页码
      totalItems:10, //总数据条数
      formRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'number', message: '年龄必须为数字值' }
        ],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    editItem(row) {
      // 执行编辑操作
      this.dialogVisible = true
      //console.log(row.name);
      this.form.id = row.id;
      this.form.name = row.name;
      this.form.age = row.age;
      this.form.phone = row.phone;
    },
    deleteItem(row) {
      // 执行删除操作
      //console.log(row);
      this.$axios.delete(`http://localhost:8181/person/delete/${row.id}`)
      .then(response => {
        // 处理删除成功的逻辑
        //console.log(response.data);
        this.$message({
          showClose: true,
          message: '删除成功',
          type: 'success'
        });
        // 刷新页面
        window.location.reload();
      })
      .catch(error => {
        // 处理删除失败的逻辑
        console.error(error);
      });
    },
    openForm() {
      this.dialogVisible = true
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过，执行提交逻辑
          //console.log('表单提交:', this.form)
          this.$axios.post('http://localhost:8181/person/submitForm',this.form)
          .then(resp => {
            // 处理响应结果
            console.log(resp.data);
            this.$message({
              message: '新增/修改，成功',
              type: 'success'
            });
            // 刷新浏览器
            window.location.reload();
          }).catch(error => {
              // 处理错误
              console.error(error);
          });
        this.dialogVisible = false
        }
      })
    },
    fetchData() {
      this.$axios.get(`http://localhost:8181/person/items?page=${this.currentPage}&limit=${this.pageSize}`)
        .then(response => {
          console.log(response.data.data);
          this.info = response.data.data.people;
          this.totalItems = response.data.data.totalPages;
        })
        .catch(error => {
          console.error(error);
        });
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchData();
    }
  },
  mounted(){
    this.fetchData();
  },
  created(){
  },
};
</script>

<style scoped>
.container {
  max-width: 800px;
  margin: 0 auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.custom-table .el-table__header th {
  background-color: #f5f7fa;
  color: #4a4a4a;
}

.custom-table .el-table__row {
  background-color: #fff;
}

.custom-table .el-table__row:nth-child(odd) {
  background-color: #f9fafc;
}

.custom-table .el-table__column {
  padding: 12px 6px;
}

.custom-table .el-table__column--selection {
  width: 60px;
  text-align: center;
  overflow: visible !important;
}

.custom-table a {
  color: #409EFF;
  text-decoration: none;
}

.custom-table a:hover {
  text-decoration: underline;
}
</style>